<template>
  <div class="card" style="width: 18rem">
    <div class="card-body">
      <h5 class="card-title text-center">图书分类</h5>
      <ul class="list-group list-group-flush">
        <li class="list-group-item" v-for="item in categoryList" :key="item.id">
          <div class="category-item">
            <h6 class="text-center">{{ item.name }}</h6>
            <span v-for="child in item.children" :key="child.id"
              ><router-link :to="'/category/' + child.id">{{
                child.name
              }}</router-link>
              &nbsp;&nbsp;</span
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [],
    };
  },
  created() {
    // 原
    // this.axios.get("/api/category").then((res) => {
    //   console.log(res);
    //   this.categoryList = res.data;
    // });

    this.axios.get("/api/category/category").then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.categoryList = res.data.data;
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.category-item a {
  text-decoration: underline;
}
</style>
